Intro

Demo

Components

• model-viewer

  The main component that wraps the web component <model-viewer>. It doesn't expose everything from the original API for now. See available attributes and events below.

  Attributes

  src	Docs	URL to the .glb or .gltf file
  alt	Docs	Text for screen readers as an alternative representation of the 3D model.
  poster	Docs	An image URL for an image to display until the model is loaded and rendered.
  loading	Docs	Loading strategy for the model. Can be "auto", "lazy" or "eager" - defaults to "auto"
  with-credentials	Docs	Uses cookies when fetching the 3D model from the "src" attribute
  disable-pan	Docs	Disables panning
  disable-tap	Docs	Disables tapping
  disable-zoom	Docs	Disables zoom
  auto-rotate	Docs	Automatically rotates the 3D model
  auto-fit		Sets width and height to 100% of the <model-viewer> element

  Events

  error	Docs	Event that indicates an error happened - for instance if the 3D model couldn't be loaded
  load	Docs	Fires when the model has been loaded

• effect-composer

  Supports composing multiple effects (see components below)

  Attributes

  render-mode	Docs	Supports "performance" or "quality"
  msaa	Docs	Controls the number of samples used. Can be any power of 2, defaults to 0.

• bloom-effect

  This effect creates a glowing light-bleed effect around bright objects.

  Attributes

  strength	Docs	The strength of the bloom effect. Takes any positive number, defaults to 1
  threshold	Docs	The pixel brightness threshold below which objects will not glow. Takes a number in the range [0.0, 1.0]. Defaults to 1.0
  radius	Docs	How far the light bleed extends. A number in the range [0.0, 1.0]. Defaults to 0.85
  smoothing	Docs	The roll-off of the light-bleed. A number in the range [0.0, 1.0]. Defaults to 0.025

• pixelate-effect

  This effect pixelates the entire scene.

  Attributes

  strength

  Docs

  The pixel size; draw one pixel for every granularity pixels. Higher value = lower resolution. Takes any positive number. Defaults to 10

• color-grade-effect

  This effect alters the look of the entire scene.

  Attributes

  tonemapping	Docs	Options: reinhard, reinhard2, reinhard2_adaptive, optimized_cineon, aces_filmic, none. Defaults to aces_filmic
  brightness	Docs	The brightness of the entire canvas. 0.0 is the original brightness, 1.0 is completely white, -1.0 is completely black. Takes a number in the range [0.0, 1.0]. Defaults to 0.0
  contrast	Docs	The contrast of the entire canvas. 0.0 is no change, 1.0 is only black or white pixels, -1.0 is only grey pixels. Takes a number in the range [-1.0, 1.0]. Defaults to 0.0
  saturation	Docs	The saturation of the entire canvas. 0.0 is no change, 1.0 means all pixels are 100% saturation, -1.0 means all pixels are 0% saturation. Takes a number in the range [-1.0, 1.0]. Defaults to 0.0
  hue	Docs	The hue color shift in radians of the entire canvas. 0.0 is no change, any higher value is a shift along the color wheel of hue radians. This property is wrapping, meaning that if you set it above the max it resets to the minimum and vice-versa. Takes a number in the range [0.0, 2 * PI]. Defaults to 0.0

• outline-effect

  This selective effect draws outlines around selected objects.

  Attributes

  strength	Docs	The edge thickness. Takes any positive number. Defaults to 1.0
  color	Docs	The edge color. Takes any string or RGB #-hexadecimal color.
  smoothing	Docs	The edge blur and roll-off. Takes a number in the range [0, 6]

• glitch-effect

  This effect causes chromatic abberation and screen tearing glitches on the scene.

  Attributes

  strength	Docs	The strength of the glitches. Higher value means more significant glitches. Takes a number in the range [0.0, 1.0]. Defaults to 0.5
  mode	Docs	The rate of the glitches. Sporadic glitches occur once every 1.0-3.5 seconds, and last between 0.5-1.0 seconds. Constant glitches have no delay, and is best used with very low strength values. Takes either sporadic or constant

• ssao-effect

  This effect simulates soft shadows in between geometries in the scene.

  Attributes

  strength

  Docs

  The strength of the shadow occlusions. Higher value means darker shadows. Takes any positive number. Defaults to 2.0

• smaa-effect

  This effect runs Subpixel Morphological Antialiasing (SMAA) on the scene.

  Attributes

  quality

  Docs

  The quality of the anti-aliasing. Higher quality is less performant. Accepts low, medium, high, ultra. Defaults to medium

Formulas

• getDimensions

  Returns the dimensions (x, y, z) of the loaded 3D model

  Docs

  Arguments

  id	id of the model-viewer instance

  Test it out!

• toDataUrl

  Returns a dataUrl for a screenshot of the model viewer

  Docs

  Arguments

  id	id of the model-viewer instance

  Test it out!